<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title local="PrayersSettings">اعدادات مواقيت الصلاة</title>

        <!-- styles -->
        <link rel="stylesheet" type="text/css" href="css/options.css" />
        <!--        <link rel="stylesheet" type="text/css" href="css/english.css" />-->

        <!-- script -->
        <script type="text/javascript" src="js/custom-form-elements.js"></script>
        <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
        <script type="text/javascript" src="../controllers/ICOptions.js"></script>
        <script type="text/javascript" src="../controllers/locals.js"></script>
        <script type="text/javascript" src="../controllers/util.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                resetAction();
            });
            function resetAction(){
                $('#reset').bind("mouseover", function() {
                    $('.tooltip').stop(true, true).show('slow', function() {
                        // Animation complete.
                    });
                });
                $('#reset').bind("mouseout", function() {
                    $('.tooltip').stop(true, true).hide('slow', function() {
                        // Animation complete.
                    });
                });
                $('.language-menu').hover(function() {
                    $('.sub-menu').stop(true, true).slideToggle('slow', function() {
                        // Animation complete.
                    });
                });
            }
        </script>
    </head>

    <body>
        <div class="overlay" id="notLogged2" style="display: none;">
            <div class="popup">
                <span local="forloggin" class="f"></span>
                <a id="login" local="clickhere" style="cursor: pointer;" class="f"></a>

            </div>
        </div>


        <!-- main container -->
        <div class="container">
            <div>
                <!-- title of extension -->
                <div class="page-title f" local="PrayersSettings">اعدادات مواقيت الصلاة</div>
                <!-- language switch logo -->
                <!---                <div id="logged" style="display: none;" class="welcome f-r">
                                    <a local="hellow">Hello</a>
                                    <a id="user"></a>
                                    <a id="userEmail"></a>
                                    <a local="logoff" id="logging" class="logout f-r">خروج</a>
                                </div>-->
                <div id="logged" style="display: none;" class="welcome f-r">
                    <a local="logoff" id="logging" class="logout f-r">خروج</a>
                    <span class="f-r">
                        <a local="hellow">Hello</a>
                        <a id="user"></a><br/>
                        <a id="userEmail"></a>
                    </span>

                </div>
                <div id="notLogged" style="display: none;" class="welcome f-r">
                    <a local="login"  class="logout f-r"></a>
                    <a local="notlogged"></a>
                </div>
                <div class="language-menu f-r">
                    <span class="f" style="cursor: pointer;" local="lang">اللغة</span>
                    <img src="images/separator.png" class="f" />
                    <span class="f language" id="language">العربية</span>
                    <div class="sub-menu">
                        <ul id="langChooser">
                            <li id="en" local="en">الانجليزية</li>
                            <li id="ar" local="ar">العربية</li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- location selection -->
            <div class="titles-bar f">
                <div class="gred" local="positioning">تحديد المكان</div>
            </div>
            <div class="radio-cont f">
                <div class="notification" >
                <ul>
                <li local="timenote">
                يجب ان يكون التوقيت الحاسب مضبوط حتي يعمل الاضافة بالكفائة اللازمة
                </li>
                <li local="locationnote">
                إذا لم يتم تحديد الموقع الخاص بك بشكل صحيح ، أو غير متوفر ، الرجاء إدخاله أدناه
                </li>
                </ul>
                </div>
                <label>
                    <input type="radio" id="current" name="radio" class="styled" /><a local="currentPosition"> تبعا للمكان الحالى</a>
                </label>

                <form action="" id="searchForm">
                    <input id="address" type="text" />
                    <button id="gotoButton" type="button" class="button" local="search" >بحــــث</button>
                </form>
                <div id="map_canvas" class="map">
                </div>
                <label>
                    <input id="googleCalendarSettings"  type="radio" name="radio" class="styled" /><a local="Gcalendar">تبعا لمفكرة Google</a>
                </label>
            </div>
            <!--reminder method -->
            <div class="titles-bar f">
                <div class="gred" local="reminderType">طريقة التذكير فى مفكرة Google</div>
            </div>
            <form action="" name="settingsForm" onsubmit="return false;">
                <div class="f reminder">
                    <p>
                        <div class="checkbox-container f checkbox-all">
                            <input id="alertAll" value="ALL" type="checkbox" name="" class="" /><a local="all">الكل</a>
                        </div>

                        <div class="checkbox-container f">
                            <input id="alertALERT" value="ALERT" type="checkbox" name="alertType" class="" /><a local="popup">نافذة منبثقة</a>
                        </div>

                        <div class="checkbox-container f">
                            <input id="alertEMAIL" value="EMAIL" type="checkbox" name="alertType" class="" /><a local="email">البريد الألكترونى</a>
                        </div>

                        <div class="checkbox-container f">
                            <input id="alertSMS" value="SMS" type="checkbox" name="alertType" class="" /><a local="sms">خدمة الرسائل القصيرة</a>
                        </div>

                    </p>
                </div>

                <div class="titles-bar f">
                    <div class="gred" local="privacysettings">الحالة & الخصوصية فى مفكرة Google</div>
                </div>

                <div class="note f-r" local="notation">سيتم حذف المواقيت غير المختارة من المفكرة Google عند الحفظ</div>

                <div class="pray-times f">
                    <table width="100%" border="0" cellspacing="12" cellpadding="0">
                        <tr>
                            <td width="150">
                                <div class="checkbox-container f">
                                    <input id="AllprayersSettings" type="checkbox" value="ALL" name="eventFor" class="" />
                                    <a local="allprayers">كل الصلوات</a>
                                </div>
                            </td>
                            <td width="300">
                                <label class="f" local="alertAfter"> الصلاة بعد الأذان بـ</label>
                                <div class="checkbox-container f">
                                    <select id="allPrayersReminderTime" name="a" class="styled">
                                        <option value="0">0</option>
                                        <option value="10">10</option>
                                        <option value="20">20</option>
                                        <option value="30">30</option>
                                    </select>
                                </div>
                                <label class="f" local="min"> ق</label>
                            </td>
                            <td width="300">
                                <label class="f" local="for">  لمدة</label>
                                <div class="checkbox-container f">
                                    <select id="allPrayersEventLong" name="b" class="styled">
                                        <option value="10">10</option>
                                        <option value="20">20</option>
                                        <option value="30">30</option>
                                    </select>
                                </div>
                                <label class="f" local="min"> ق</label>
                            </td>
                            <td width="170">
                                <label class="f" local="privacy"> الخصوصية</label>
                                <div class="checkbox-container f">
                                    <select id="allPrayersPrivacy" name="c" class="styled">
                                        <option value="public" local="general">عام</option>
                                        <option value="private" local="private">خاص</option>
                                        <option value="default" local="default">افتراضى</option>
                                    </select>
                                </div>

                            </td>
                            <td width="200">
                                <label class="f" local="status"> الحاله</label>
                                <div class="checkbox-container f">
                                    <select id="allPrayersStatus" name="d" class="styled">
                                        <option value="transparent" local="available">متواجد</option>
                                        <option value="opaque" local="busy">مشغول</option>
                                    </select>
                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td width="150">
                                <div class="checkbox-container f">
                                    <input id="fajrPrayer" type="checkbox" value="fajr" name="eventFor" class="" /><a local="fajrPrayer">صلاة الفجر</a>
                                </div>
                            </td>
                            <td width="200">
                                <label class="f" local="alertAfter"> الصلاة بعد الأذان بـ</label>
                                <div class="checkbox-container f">
                                    <select id="fajrPrayersReminderTime" id="fajr" name="e" class="styled">
                                        <option value="0">0</option>
                                        <option value="10">10</option>
                                        <option value="20">20</option>
                                        <option value="30">30</option>
                                    </select>
                                </div>
                                <label class="f" local="min"> ق</label>
                            </td>
                            <td width="300">
                                <label class="f" local="for">  لمدة</label>
                                <div class="checkbox-container f">
                                    <select id="fajrPrayersEventLong" name="f" class="styled">
                                        <option value="10">10</option>
                                        <option value="20">20</option>
                                        <option value="30">30</option>
                                    </select>
                                </div>
                                <label class="f" local="min"> ق</label>
                            </td>
                            <td width="170">
                                <label class="f" local="privacy"> الخصوصية</label>
                                <div class="checkbox-container f">
                                    <select id="fajrPrayersPrivacy" name="g" class="styled">
                                        <option value="public" local="general">عام</option>
                                        <option value="private" local="private">خاص</option>
                                        <option value="default" local="default">افتراضى</option>
                                    </select>
                                </div>

                            </td>
                            <td>
                                <label class="f" local="status"> الحاله</label>
                                <div class="checkbox-container f">
                                    <select id="fajrPrayersStatus" name="h" class="styled">
                                        <option value="transparent" local="available">متواجد</option>
                                        <option value="opaque" local="busy">مشغول</option>
                                    </select>
                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td width="150">
                                <div class="checkbox-container f">
                                    <input id="zuhrPrayer" type="checkbox" value="zuhr" name="eventFor" class="" />
                                    <a local="zuhrPrayer">صلاة الظهر</a>
                                </div>
                            </td>
                            <td width="200">
                                <label class="f"local="alertAfter"> الصلاة بعد الأذان بـ</label>
                                <div class="checkbox-container f">
                                    <select id="zuhrPrayersReminderTime" name="i" class="styled">
                                        <option value="0">0</option>
                                        <option value="10">10</option>
                                        <option value="20">20</option>
                                        <option value="30">30</option>
                                    </select>
                                </div>
                                <label class="f" local="min"> ق</label>
                            </td>
                            <td width="300">
                                <label class="f" local="for">  لمدة</label>
                                <div class="checkbox-container f">
                                    <select id="zuhrPrayersEventLong" name="j" class="styled">
                                        <option value="10">10</option>
                                        <option value="20">20</option>
                                        <option value="30">30</option>
                                    </select>
                                </div>
                                <label class="f" local="min"> ق</label>
                            </td>
                            <td width="170">
                                <label class="f" local="privacy"> الخصوصية</label>
                                <div class="checkbox-container f">
                                    <select id="zuhrPrayersPrivacy" name="k" class="styled">
                                        <option value="public" local="general">عام</option>
                                        <option value="private" local="private">خاص</option>
                                        <option value="default" local="default">افتراضى</option>
                                    </select>
                                </div>

                            </td>
                            <td>
                                <label class="f" local="status"> الحاله</label>
                                <div class="checkbox-container f">
                                    <select id="zuhrPrayersStatus" name="l" class="styled">
                                        <option value="transparent" local="available">متواجد</option>
                                        <option value="opaque" local="busy">مشغول</option>
                                    </select>
                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td width="150">
                                <div class="checkbox-container f">
                                    <input id="asrPrayer" type="checkbox" value="asr" name="eventFor" class="" />
                                    <a local="asrPrayer">صلاة العصر</a>
                                </div>
                            </td>
                            <td width="200">
                                <label class="f" local="alertAfter"> الصلاة بعد الأذان بـ</label>
                                <div class="checkbox-container f">
                                    <select id="asrPrayersReminderTime" name="m" class="styled">
                                        <option value="0">0</option>
                                        <option value="10">10</option>
                                        <option value="20">20</option>
                                        <option value="30">30</option>
                                    </select>
                                </div>
                                <label class="f" local="min"> ق</label>
                            </td>
                            <td width="300">
                                <label class="f" local="for">  لمدة</label>
                                <div class="checkbox-container f">
                                    <select id="asrPrayersEventLong" name="n" class="styled">
                                        <option value="10">10</option>
                                        <option value="20">20</option>
                                        <option value="30">30</option>
                                    </select>
                                </div>
                                <label class="f" local="min"> ق</label>
                            </td>
                            <td width="170">
                                <label class="f" local="privacy"> الخصوصية</label>
                                <div class="checkbox-container f">
                                    <select id="asrPrayersPrivacy" name="o" class="styled">
                                        <option value="public" local="general">عام</option>
                                        <option value="private" local="private">خاص</option>
                                        <option value="default" local="default">افتراضى</option>
                                    </select>
                                </div>

                            </td>
                            <td>
                                <label class="f" local="status"> الحاله</label>
                                <div class="checkbox-container f">
                                    <select id="asrPrayersStatus" name="p" class="styled">
                                        <option value="transparent" local="available">متواجد</option>
                                        <option value="opaque" local="busy">مشغول</option>
                                    </select>
                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td width="150">
                                <div class="checkbox-container f">
                                    <input id="maghribPrayer" type="checkbox" value="maghrib" name="eventFor" class="" />
                                    <a local="maghribPrayer">صلاة المغرب</a>
                                </div>
                            </td>
                            <td width="200">
                                <label class="f" local="alertAfter"> الصلاة بعد الأذان بـ</label>
                                <div class="checkbox-container f">
                                    <select id="maghribPrayersReminderTime" name="q" class="styled">
                                        <option value="0">0</option>
                                        <option value="10">10</option>
                                        <option value="20">20</option>
                                        <option value="30">30</option>
                                    </select>
                                </div>
                                <label class="f" local="min"> ق</label>
                            </td>
                            <td width="300">
                                <label class="f" local="for">  لمدة</label>
                                <div class="checkbox-container f">
                                    <select id="maghribPrayersEventLong" name="r" class="styled">
                                        <option value="10">10</option>
                                        <option value="20">20</option>
                                        <option value="30">30</option>
                                    </select>
                                </div>
                                <label class="f" local="min"> ق</label>
                            </td>
                            <td width="170">
                                <label class="f" local="privacy"> الخصوصية</label>
                                <div class="checkbox-container f">
                                    <select id="maghribPrayersPrivacy" name="s" class="styled">
                                        <option value="public" local="general">عام</option>
                                        <option value="private" local="private">خاص</option>
                                        <option value="default" local="default">افتراضى</option>
                                    </select>
                                </div>

                            </td>
                            <td>
                                <label class="f" local="status"> الحاله</label>
                                <div class="checkbox-container f">
                                    <select id="maghribPrayersStatus" name="t" class="styled">
                                        <option value="transparent" local="available">متواجد</option>
                                        <option value="opaque" local="busy">مشغول</option>
                                    </select>
                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td width="200">
                                <div class="checkbox-container f">
                                    <input id="ishaPrayer" type="checkbox" value="isha" name="eventFor" class="" />
                                    <a local="ishaPrayer">صلاة العشاء</a>
                                </div>
                            </td>
                            <td width="500">
                                <label class="f" local="alertAfter"> الصلاة بعد الأذان بـ</label>
                                <div class="checkbox-container f">
                                    <select id="ishaPrayersReminderTime" name="u" class="styled">
                                        <option value="0">0</option>
                                        <option value="10">10</option>
                                        <option value="20">20</option>
                                        <option value="30">30</option>
                                    </select>
                                </div>
                                <label class="f" local="min"> ق</label>
                            </td>
                            <td width="400">
                                <label class="f" local="for">  لمدة</label>
                                <div class="checkbox-container f">
                                    <select id="ishaPrayersEventLong" name="v" class="styled">
                                        <option value="10">10</option>
                                        <option value="20">20</option>
                                        <option value="30">30</option>
                                    </select>
                                </div>
                                <label class="f" local="min"> ق</label>
                            </td>
                            <td width="200">
                                <label class="f" local="privacy"> الخصوصية</label>
                                <div class="checkbox-container f">
                                    <select id="ishaPrayersPrivacy" name="w" class="styled">
                                        <option value="public" local="general">عام</option>
                                        <option value="private" local="private">خاص</option>
                                        <option value="default" local="default">افتراضى</option>
                                    </select>
                                </div>

                            </td>
                            <td>
                                <label class="f" local="status"> الحاله</label>
                                <div class="checkbox-container f">
                                    <select id="ishaPrayersStatus" name="x" class="styled">
                                        <option value="transparent" local="available">متواجد</option>
                                        <option value="opaque" local="busy">مشغول</option>
                                    </select>
                                </div>
                            </td>
                        </tr>
                    </table>


                </div>

                <div class="titles-bar f">
                    <div class="gred" local="saveFor">المدة الزمنية لتسجيل مواقيت الصلاة مفكرة Google</div>
                </div>

                <div class="radio-cont f">
                    <label class="f" style="margin-left:20px;">
                        <input id="lastFor-7" type="radio" value="7" name="status" class="styled" />
                        <a local="weakly">أسبوعى </a>
                    </label>
                    <label class="f">
                        <input id="lastFor-30" type="radio" value="30" name="status" class="styled" />
                        <a local="monthly">شهرى</a>
                    </label>

                </div>
                <div class="button-cont f">
                    <button type="button" id="save" class="button" local="save" >حفــظ</button>
                    <button type="button" id="reset" class="button" local="cancel" >مسح</button>
                    <a id="saved" style="display: none;" local="saved" class="saved f">تم الحفظ</a>
                    <a id="deleted" style="display: none;" local="deleted" class="saved f">تم حذف مواقيت الصلاة</a>
                    <div class="tooltip" ><img src="images/tooltip_ar.png"></div>
                </div>
            </form>
        </div>
    </body>
</html>